<template>
  <div class="transfer">
    <!-- 3.复制级联框 data(数据) defaultChecked(默认选择) filterable(是否筛选) title(框名称) @getValue="v($event,data1)"接收数据 -->
    <transfer
      ref="transfer1"
      :data="data1.data"
      :defaultChecked="data1.defaultChecked"
      @getValue="v($event,data1)"
      title="列表1"
    ></transfer>
    <div class="button-group">
      <!-- 4.设置moveData执行函数：参数为由哪个数据到哪个数据 -->
      <el-button type="primary" @click="moveData(data1,data2)">&gt;&gt;&gt;</el-button>
      <el-button type="primary" @click="moveData(data2,data1)">&lt;&lt;&lt;</el-button>
    </div>
    <transfer ref="transfer2" :data="data2.data" @getValue="v($event,data2)" title="列表2"></transfer>
    <div class="button-group">
      <el-button type="primary" @click="moveData(data2,data3)">&gt;&gt;&gt;</el-button>
      <el-button type="primary" @click="moveData(data3,data2)">&lt;&lt;&lt;</el-button>
    </div>
    <transfer ref="transfer3" :data="data3.data" @getValue="v($event,data3)" title="列表3"></transfer>
  </div>
</template>

<script>
import transfer from "./encapsulation/Transfer"; //1.载入封装级联vue
export default {
  data() {
    return {
      //2.声明数据各个框的数据对象，应包括数据数组（data命名固定，应包含name和id,id为唯一标识符），例如data123123:{data[{ name: "上海", id: 100001 }]}
      data1: {
        data: [
          { name: "上海", id: 100001 },
          { name: "北京", id: 100002 },
          { name: "广州", id: 100003 },
          { name: "深圳", id: 100004 },
          { name: "济南", id: 100005 },
          { name: "南昌", id: 100006 },
          { name: "武汉", id: 100007 },
          { name: "成都", id: 100008 },
          { name: "昆明", id: 100009 },
          { name: "福州", id: 100010 },
          { name: "香港", id: 100011 },
          { name: "澳门", id: 100012 },
          { name: "台北", id: 100013 },
          { name: "长春", id: 100014 },
          { name: "哈尔滨", id: 100015 },
          { name: "徐州", id: 100016 },
          { name: "台州", id: 100017 },
          { name: "苏州", id: 100018 }
        ],
        defaultChecked: [100001]//无法将初始 选择值静态方式写入属性
      },
      data2: {
        data: [
          { name: "石家庄", id: 100020 },
          { name: "郑州", id: 100021 },
          { name: "南京", id: 100022 },
          { name: "杭州", id: 100023 }
        ]
      },
      data3: {
        data: [
          { name: "拉萨", id: 100024 },
          { name: "呼伦贝尔", id: 100025 },
          { name: "重庆", id: 100026 },
          { name: "西宁", id: 100027 }
        ]
      }
    };
  },
  components: {
    transfer: transfer
  },
  methods: {
    moveData(a, b) {
      if (a.select != []) {
        this.$children.forEach(p => {
          if (JSON.stringify(p.data) === JSON.stringify(a.data)) {//找到移除框
            p.dataSon = [];//清除移除框选择
            p.isIndeterminate = false;//设为不多选
            p.checkAll = false;//设为不全选
          }
          if (JSON.stringify(p.data) === JSON.stringify(b.data)) {//找到接收框
            p.checkAll = false;//设为不全选
            if(p.dataSon.length>0){//如果之前有选择
              p.isIndeterminate = true;//设为多选
            }
          }
        });
        a.data = a.data.filter(key => !a.select.includes(key));//移除框数据移除
        b.data = a.select.concat(b.data);//接受框数据接收
        a.select = [];//移除框选择值清空
      }
    },
    v(v, s) {//实时获取选择数据
      s.select = v;
    }
  }
};
</script>

<style>
.transfer {
  height: 300px;
  width: 800px;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
}
.transfer .button-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.transfer .el-button + .el-button {
  margin: 10px 0;
}
.transferlist {
  width: 25%;
  border: solid 1px #ddd;
  box-sizing: border-box;
}
.transferlist .el-checkbox {
  display: block;
}
.transferlist .transfertitle {
  padding: 0 15px;
  line-height: 40px;
  background-color: #eee;
  position: relative;
}
.transferlist .transfertitle .el-checkbox {
  vertical-align: middle;
  padding: 13px 0;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  box-sizing: border-box;
  padding-left: 15px;
}
.transferlist .transfertitle span {
  text-align: center;
  display: block;
}
.transferlist .transfermain {
  padding: 10px 15px;
  height: calc(100% - 40px);
  overflow-x: hidden;
  box-sizing: border-box;
}
.transferlist .transfermain .el-checkbox {
  margin: 5px 0;
}
</style>